import React, { Component } from 'react';
import {
  Table,
  Pagination,
  Dialog,
  Button,
  Icon,
  Grid,
  Select,
  Search,
} from '@alifd/next';
import { withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import ChooseHead from '../chooseHead';
import { getLocalTime } from '../../../../utils/localTime';
import './index.scss';
import PageHead from '../../../../components/PageHead';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { Row, Col } = Grid;
const groupHeaderRender = function (record) {
  return <div>{record.product[0].title}</div>;
};

function TableFooter(props) {
  return (
    <div style={{ fontSize: '14px' }}>
      <span style={{ display: 'inline-block', background: '#FF6E02', padding: '10px', color: '#fff', marginRight: '20px' }}>合计：</span>
      <span style={{ marginRight: '20px' }}>采购总数量：<span style={{ color: '#D95700' }}>{props.data.on_num}</span> </span>
      <span style={{ marginRight: '20px' }}>采购总金额：<span style={{ color: '#D95700' }}>{props.data.on_buying_price}</span> </span>
      <span style={{ marginRight: '20px' }}>应售总金额：<span style={{ color: '#D95700' }}>{props.data.on_retail_price}</span> </span>
      <span style={{ marginRight: '20px' }}>退货总数量：<span style={{ color: '#D95700' }}>{props.data.out_num}</span> </span>
      <span style={{ marginRight: '20px' }}>退货总金额：<span style={{ color: '#D95700' }}>{props.data.out_buying_price}</span> </span>
    </div>
  );
}

@withRouter
export default class goodList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      data: [],
      page: 1,
      countPage: '', // 总页数
      perPage: 5, // 每页数据量
      filterData: {
        search: '',
        class_id: '',
        s_id: '',
        start_time: '',
        end_time: '',
        type: 0,
      },
      SingleGoodsData: {}, // 商品信息
      Dvisible0: false, // 非镜片详情
      Dvisible1: false, // 镜片详情
      count: {},
    };
  }

  // 获取表单列表
getPurchaseList= () => {
  service({
    method: 'get',
    url: api.PurInSummary,
    params: {
      search: this.state.filterData.search || '',
      class_id: this.state.filterData.class_id || '',
      s_id: this.state.filterData.s_id || '',
      page: this.state.page || 1,
      start_time: this.state.filterData.start_time || '',
      end_time: this.state.filterData.end_time || '',
      type: this.state.filterData.type,
    },
  })
    .then((res) => {
   
      if (res.data.code === 200) {
        const data = res.data.info_list;
        const count = res.data.total;
        this.setState(
          {
            data,
            countPage: res.data.count_page,
            isLoading: false,
            count,
          }
        );
      }
    });
}
// 获取单个商品的信息
getSingleData= (id) => {
  service({
    method: 'get',
    url: api.GoodsInfo,
    params: {
      g_id: id,
    },
  })
    .then((res) => {
      // console.log(res);
      const data = res.data.goods_info;
      data.ope_time = getLocalTime(data.ope_time);
      data.pro_time = getLocalTime(data.pro_time);
      data.bus_time = getLocalTime(data.bus_time);
      data.org_time = getLocalTime(data.org_time);
      data.reg_time = getLocalTime(data.reg_time);
      this.setState(
        {
          SingleGoodsData: data,
        }
      );
      if (data.goods_type === 0) {
        this.setState(
          {
            Dvisible0: true,
          }
        );
      } else if (data.goods_type === 1) {
        this.setState(
          {
            Dvisible1: true,
          }
        );
      }
    });
}
componentDidMount() {
  this.getPurchaseList();
}
  handlePaginationChange = (current) => {
    this.setState(
      {
        page: current,
        isLoading: true,
      },
      () => {
        this.getPurchaseList();
      }
    );
  };

  handleFilterChange = (value) => {
    let start_time = '';
    let end_time = '';
    if (value.time) {
      if (value.time[0]) {
        start_time = new Date(value.time[0].toLocaleString()).toLocaleDateString();
      }
      if (value.time[1]) {
        end_time = new Date(value.time[1].toLocaleString()).toLocaleDateString();
      }
    }
    this.setState(
      {
        filterData: {
          search: value.search,
          class_id: value.class_id,
          s_id: value.s_id,
          type: value.type,
          start_time,
          end_time,
        },
        page: 1,
        isLoading: true,
      }, () => {
        this.getPurchaseList();
      }
    );
  };
  // 详情
  handleDetail = (g_id) => {
    this.getSingleData(g_id);
  };
  onClose=() => {
    this.setState(
      {
        Dvisible0: false,
        Dvisible1: false,
      }
    );
  }
  handleDownload = () => {
    window.location.href = `${api.PurInSummary}?excel=1&search=${this.state.filterData.search}&s_id=${this.state.filterData.s_id}&g_id=${this.state.filterData.g_id}&start_time=${this.state.filterData.start_time}&end_time=${this.state.filterData.end_time}&type=${this.state.filterData.type}`;
  }
  groupHeaderRender = (record) => {
    if (record.reason) {
      return <div>{record.title} <span style={{ marginLeft: '20px' }}>数量：{record.count.stock}</span> <span style={{ marginLeft: '20px' }}>成本总额:{record.count.total_buying_price}</span>  <span style={{ color: '#666', float: 'right' }}>退货原因：{record.reason}</span></div>;
    }
    return <div>{record.title} <span style={{ marginLeft: '20px' }}>数量：{record.count.stock}</span> <span style={{ marginLeft: '20px' }}>成本总额:{record.count.total_buying_price}</span></div>;
  };
  renderOper = (value, index, record) => {
    return (
      <div>
        <a style={styles.link.detail} onClick={() => this.handleDetail(record.g_id)}>
         详情
        </a>
      </div>
    );
  };

  render() {
    const { isLoading, data, page, perPage, countPage, SingleGoodsData,count } = this.state;

    return (
      <div style={styles.container}>
        <ChooseHead onChange={this.handleFilterChange} />
        <PageHead title="采购汇总列表" buttonText="导出Excel" onClick={this.handleDownload} />
        <IceContainer style={{paddingBottom:'0'}}>
          <Table loading={isLoading} dataSource={data} hasBorder={false}>
            <Table.GroupHeader cell={this.groupHeaderRender} style={styles.tHead} />
            <Table.Column title="商品条码" dataIndex="goods_bar_code" width={100} />
            <Table.Column title="品牌" dataIndex="goods_class_name" width={100} />
            <Table.Column title="商品名称" dataIndex="goods_name" width={100} />
            <Table.Column title="型号" dataIndex="model" width={100} />
            <Table.Column title="色号/膜层" dataIndex="color_layer" width={100} />
            <Table.Column title="数量" dataIndex="stock" width={100} />
            <Table.Column title="零售价" dataIndex="retail_price" width={100} />
            <Table.Column title="进货价" dataIndex="buying_price" width={100} />
            <Table.Column title="镜片类型" dataIndex="lens_type" width={100} />
            <Table.Column title="折射率" dataIndex="refractivity" width={100} />
            <Table.Column title="屈光度" dataIndex="diopter" width={100} />
            <Table.Column title="散光度" dataIndex="astigmatism" width={100} />
            <Table.Column title="折扣" dataIndex="rebate" width={100} />
            <Table.Column title="生产批号" dataIndex="batch_number" width={100} />
            <Table.Column title="到期日期" dataIndex="due_time" width={100} />
            <Table.Column title="操作" cell={this.renderOper} width={100} />
          </Table>
          <TableFooter data={count} />
          {/* 商品信息详情 */}
          <Dialog
            visible={this.state.Dvisible0}
            onClose={this.onClose}
            footer={<div><Button type="primary" onClick={this.onClose} className="dialogButton EditBtn">确定</Button></div>}
            footerAlign="center"
            id="DDialog"
            style={{ marginTop: '25px' }}
          >
            <h3 className="titleWrap"><span className="dialogTitle">商品信息详情信息</span></h3>
            <IceContainer className="dialogContent">
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">商品条码:</Col>
                <Col span="6" >{SingleGoodsData.goods_bar_code}</Col>

                <Col span="6" className="listNameQ">供应商:</Col>
                <Col span="6">{SingleGoodsData.name}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">商品类别:</Col>
                <Col span="6" >{SingleGoodsData.class_name}</Col>

                <Col span="6" className="listNameQ">商品名称:</Col>
                <Col span="6">{SingleGoodsData.goods_name}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>

                <Col span="6" className="listNameQ">型号:</Col>
                <Col span="6">{SingleGoodsData.model}</Col>
                <Col span="6" className="listNameQ">ADD:</Col>
                <Col span="6" >{SingleGoodsData.ADD}</Col>
              </Row>

              <Row wrap width="100" style={{ marginBottom: '15px' }}>

                <Col span="6" className="listNameQ">颜色/膜层:</Col>
                <Col span="6" >{SingleGoodsData.color_layer}</Col>
                <Col span="6" className="listNameQ">特殊参数:</Col>
                <Col span="6">{SingleGoodsData.case_value}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>

                <Col span="6" className="listNameQ">单位:</Col>
                <Col span="6" >{SingleGoodsData.unit}</Col>
                <Col span="6" className="listNameQ">规格:</Col>
                <Col span="6">{SingleGoodsData.spec}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">零售价:</Col>
                <Col span="6">{SingleGoodsData.retail_price}</Col>
                <Col span="6" className="listNameQ">进货价:</Col>
                <Col span="6" >{SingleGoodsData.buying_price}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">折扣率:</Col>
                <Col span="6">{SingleGoodsData.rebate}</Col>
                <Col span="6" className="listNameQ">积分率:</Col>
                <Col span="6">{SingleGoodsData.integral_rate}</Col>
              </Row>
            </IceContainer>
          </Dialog>
          <Dialog
            visible={this.state.Dvisible1}
          // autoFocus
            onClose={this.onClose}
            footer={<div><Button type="primary" onClick={this.onClose} className="dialogButton EditBtn">确定</Button></div>}
            footerAlign="center"
            id="DDialog"
            style={{ marginTop: '25px' }}
          >
            <h3 className="titleWrap"><span className="dialogTitle">商品信息详情信息</span></h3>
            <IceContainer className="dialogContent">
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">商品条码:</Col>
                <Col span="6" >{SingleGoodsData.goods_bar_code}</Col>

                <Col span="6" className="listNameQ">供应商:</Col>
                <Col span="6">{SingleGoodsData.name}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">商品类别:</Col>
                <Col span="6" >{SingleGoodsData.class_name}</Col>

                <Col span="6" className="listNameQ">商品名称:</Col>
                <Col span="6">{SingleGoodsData.goods_name}</Col>
              </Row>

              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">ADD:</Col>
                <Col span="6" >{SingleGoodsData.ADD}</Col>

                <Col span="6" className="listNameQ">折射率:</Col>
                <Col span="6">{SingleGoodsData.refractivity}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">是否渐进:</Col>
                <Col span="6" >{SingleGoodsData.is_gradual}</Col>

                <Col span="6" className="listNameQ">是否球面:</Col>
                <Col span="6">{SingleGoodsData.is_sphere}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                {/* <Col span="6" className="listNameQ">直径:</Col>
                <Col span="6" >{SingleGoodsData.diameter}</Col> */}

                <Col span="6" className="listNameQ">型号:</Col>
                <Col span="6">{SingleGoodsData.model}</Col>
                <Col span="6" className="listNameQ">颜色/膜层:</Col>
                <Col span="6" >{SingleGoodsData.color_layer}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">特殊参数:</Col>
                <Col span="6">{SingleGoodsData.case_value}</Col>
                <Col span="6" className="listNameQ">单位:</Col>
                <Col span="6" >{SingleGoodsData.unit}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>

                <Col span="6" className="listNameQ">进货价:</Col>
                <Col span="6" >{SingleGoodsData.buying_price}</Col>
                <Col span="6" className="listNameQ">零售价:</Col>
                <Col span="6">{SingleGoodsData.retail_price}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>


                <Col span="6" className="listNameQ">折扣率:</Col>
                <Col span="6">{SingleGoodsData.rebate}</Col>
                <Col span="6" className="listNameQ">积分率:</Col>
                <Col span="6">{SingleGoodsData.integral_rate}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>

                <Col span="6" className="listNameQ">生产企业:</Col>
                <Col span="18">{SingleGoodsData.esta_person}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">生产许可证号:</Col>
                <Col span="6">{SingleGoodsData.pro_number}</Col>
                <Col span="6" className="listNameQ">生产许可证有效期至:</Col>
                <Col span="6">{SingleGoodsData.pro_time}</Col>

              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">经营许可证号:</Col>
                <Col span="6">{SingleGoodsData.ope_number}</Col>
                <Col span="6" className="listNameQ">经营许可证有效期至:</Col>
                <Col span="6">{SingleGoodsData.ope_time}</Col>
              </Row>

              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">注册证号:</Col>
                <Col span="6">{SingleGoodsData.reg_number}</Col>
                <Col span="6" className="listNameQ">注册证有效期至:</Col>
                <Col span="6">{SingleGoodsData.reg_time}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">有效期（月）:</Col>
                <Col span="6">{SingleGoodsData.term_time}</Col>
                <Col span="6" className="listNameQ">国际医疗器械类别编号:</Col>
                <Col span="6">{SingleGoodsData.medical_number}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">医疗器械名称:</Col>
                <Col span="6">{SingleGoodsData.medical_name}</Col>
                <Col span="6" className="listNameQ">预留1:</Col>
                <Col span="6">{SingleGoodsData.m_reserve_one}</Col>
              </Row>
              <Row wrap width="100" style={{ marginBottom: '15px' }}>
                <Col span="6" className="listNameQ">预留2:</Col>
                <Col span="6">{SingleGoodsData.m_reserve_two}</Col>
              </Row>
            </IceContainer>
          </Dialog>
        </IceContainer>
        <Pagination
          style={styles.pagination}
          current={page}
          pageSize={perPage}
          onChange={this.handlePaginationChange}
          total={perPage * countPage}
        />
      </div>
    );
  }
}

const styles = {
  container: {
    padding: '0 0px 20px',
  },
  listTitle: {
    textAlign: 'left',
    lineHeight: '40px',
    fontSize: '20px',
    color: '#333333',
    width: '140px',
    height: '40px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
    edit: {
      color: '#8272EC',
      cursor: 'pointer',
    },
    detail: {
      color: '#5584FF',
      cursor: 'pointer',
    },
    delete: {
      color: '#FF3000',
      cursor: 'pointer',
    },
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'center',
  },
  tHead: {
    backgroundColor: '#fff !important',
    borderTop: 'none',
    color: '#ff0 !important',
  },
};
